import type { Component, PropType } from "vue";

interface contentItem {
  description: string; // 描述
  field: string[]; // 字段数组
  imgUrl?: string;
  slot?: Component; // 自定义组件
  date?: string; // 日期格式化 'YYYY-MM-DD HH:mm:ss'
  enum?: any; // 枚举数据
  isShow?: string;
  prev?: string; // 前缀
  next?: string; // 后缀
}
interface delItem {
  text?: string;
  content?: string;
}
interface componentOptions {
  checkedKey: string; // 自定义组件的checkedKey
  checkedValue: string; // 自定义组件的checkedValue
  value: string; // 自定义组件的value
}
export const basicProps = {
  api: {
    default: null,
    type: Function as PropType<(...arg: any[]) => Promise<any>>,
    required: true,
  }, // 接口的api
  delApi: {
    default: null,
    type: Function as PropType<(...arg: any[]) => Promise<any>>,
    required: true,
  }, // 删除接口的api
  titleKey: {
    default: "defaultKey",
    type: String,
  }, // 标题定义的字段
  content: {
    default: [
      {
        description: "cityName",
        field: ["cityName"],
      },
    ],
    type: Array as PropType<contentItem[]>,
  }, // 内容定义的字段
  formParams: {
    default: null,
    type: Object as PropType<any>,
  }, // 表单参数
  divider: {
    default: false,
    type: Boolean as PropType<boolean>,
  }, // 是否显示分割线
  dividerType: {
    default: "horizontal",
    type: String as PropType<"horizontal" | "vertical">,
  }, // 分割线类型
  delText: {
    default: {
      text: "删除",
      content: "确定删除吗？",
    },
    type: Object as PropType<delItem>,
  }, // 删除按钮文字

  titleEnum: {
    default: null,
    type: Object as PropType<any>,
  }, // 标题枚举数据
  tooltip: {
    default: false,
    type: Boolean as PropType<boolean>,
  }, // 是否显示tooltip
  componentProps: {
    default: {
      checkedKey: "level",
      checkedValue: "high",
      value: "level",
    },
    type: Object as PropType<componentOptions>,
  }, // 自定义组件参数
};
// 组件暴露出来的事件   reload   通过ref调用组件的reload方法（刷新卡片）
// emit的事件
//  @change-card=changeCard  卡片修改事件
//  @delete=delCard  卡片删除事件
//  @click-item=clickItem  卡片点击自定义组件事件

// 自定义slot需使用tsx
// function SwitchComponent(props: any) {
//   return <Switch checked={props.checked}/>;
// } // 自定义组件
// function InputComponent(props: any) {
//   return <Input allow-clear v-model:value={props.value} />;
// } // 自定义组件
// <CardList
// ref="cardRef"
// :api="getForbiddenPage"
// :content="content"
// :del-api="deleteForbidden"
// :form-params="formState"
// title-key="areaType"
// @change-card="changeCard"
// @click-component="changeCard"
// >
// <template #header>
//   <div class="mb-4 flex w-full flex-wrap justify-end">
//     <Button type="primary" @click="事件">新增</Button>
//   </div>
// </template>
// </CardList>
// const content = [
//   { description: ':', field: ['接口字段'], enum: '枚举' },
//   { slot: SwitchComponent },
//   { description: ':', field: ['接口字段'], prev: '前置', next: '后置' },
//   { description: ':', field: ['接口字段'], date: 'YYYY-MM-DD HH:mm:ss' },
// ];
